<template>
  <div class="ad-detail">
    <h2 class="title">店铺广告</h2>
    <div class="box">
      <div class="wrapper">
        <el-form ref="form" label-position="right" label-width="140px">
          <el-form-item class="name" prop="name" label="广告名称：">
            <p>{{ info.name }}</p>
          </el-form-item>
          <el-form-item prop="type" label="广告位置：">
            <p>{{ info.advertiseType === '00600006' ? '店铺首页轮播图' : '' }}</p>
          </el-form-item>
          <el-form-item class="upload-box" prop="pcBanner" label="广告图片(电脑端)：">
            <img :src="qnPath(info.imagePc)" style="width: 400px; height: 90px">
            <!-- <el-image
              style="width: 400px; height: 90px"
              :src="qnPath(info.imagePc)"
              fit="fill"
            /> -->
          </el-form-item>
          <el-form-item class="upload-box" prop="mobileBanner" label="广告图片(手机端)：">
            <img :src="qnPath(info.imageApp)" style="width: 300px; height: 100px">
            <!-- <el-image
              style="width: 300px; height: 100px"
              :src="qnPath(info.imageApp)"
              fit="fill"
            /> -->
          </el-form-item>
          <el-form-item prop="sort" label="广告排序：">
            <p>{{ info.sort }}</p>
          </el-form-item>
          <el-form-item prop="linkType" label="链接类型：">
            <p>{{ info.linkType === '0' ? '商品' : info.linkType === '2' ? '图片' : '活动' }}</p>
          </el-form-item>
          <!-- 商品 -->
          <el-form-item v-if="info.linkType === '0'" class="pdts">
            <div class="pdts-wrapper">
              <table v-if="adLinkDetail.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>销量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="pdt in adLinkDetail" :key="pdt.id">
                    <td>
                      <div>
                        <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image.split(',')[0])" fit="fit" /></p>
                        <div class="info">
                          <p class="name">{{ pdt.name }}</p>
                          <p class="id">ID：{{ pdt.id }}</p>
                        </div>
                      </div>
                    </td>
                    <td>{{ pdt.typeValue }}</td>
                    <td>{{ pdt.unitPrice | fixedPrice }}</td>
                    <td>{{ pdt.amount }}</td>
                    <td>{{ pdt.sales }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <!-- 活动 -->
          <el-form-item v-if="info.linkType === '1'" class="activity">
            <div class="activity-wrapper">
              <div v-if="adLinkDetail.id" class="info-box">
                <p class="img"><el-image style="width: 300px; height: 100px" :src="qnPath(adLinkDetail.imageWeb)" fit="fit" /></p>
                <div>
                  <p class="name">{{ adLinkDetail.name }}</p>
                  <p v-if="adLinkDetail.type === '02200001'">活动类型：折扣-{{ adLinkDetail.disCount }}折</p>
                  <p>开始时间：{{ new Date(adLinkDetail.beginTime) | getDate }}至{{ new Date(adLinkDetail.finishTime) | getDate }}</p>
                </div>
              </div>
            </div>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item v-if="info.linkType === '2'" class="activity">
            <div class="image-wrapper">
              <div class="pc">
                <h3>电脑端图片</h3>
                <p v-if="adLinkDetail.referenceId[0]" class="img"><img :src="qnPath(adLinkDetail.referenceId[0])"></p>
              </div>
              <div class="mobile">
                <h3>手机端图片</h3>
                <p v-if="adLinkDetail.referenceId[1]" class="img"><img :src="qnPath(adLinkDetail.referenceId[1])"></p>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="status" label="状态：">
            <p>{{ info.status === '00400001' ? '已' : '未' }}开启</p>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="goBack">返 回</el-button>
            <el-button type="primary" @click="edit">编 辑</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getOneById } from '@/api/ad';
export default {
  name: 'AdDetail',
  data() {
    return {
      id: '',
      info: {},
      adLinkDetail: {
        id: '',
        advertisementId: '',
        referenceId: []
      }
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getOneById(this.id);
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'AdShop', query: { reload: false }});
    },
    edit() {
      this.$router.push({ name: 'AdEdit', params: { id: this.id }});
    },
    getOneById(id) {
      new Promise((resolve, reject) => {
        getOneById({ id }).then(res => {
          const { advertisement, advertisementDetail } = res.data;
          if (advertisement.linkType === '2') {
            const { id, advertisementId } = advertisementDetail;
            const referenceId = advertisementDetail.referenceId.split(',');
            this.adLinkDetail = {
              id, advertisementId, referenceId
            };
          } else {
            this.adLinkDetail = advertisementDetail;
          }
          this.info = advertisement;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.ad-detail {
  font-size: $fontSizeBase;
  background-color: #fff;
  p,h2,h3{
    margin: 0;
  }
}
@import '@/styles/shop-activity-add.scss';
.pdts-selected-table,
.activity-wrapper .info-box{
  margin-top: 0;
}
</style>
